<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS3--多背景</title>
    <style media="screen">
      .div1{
        margin:20px;
        float: left;
        width: 400px;
        height: 400px;
        border: 1px solid green;
        background: url('bg1.png') center left no-repeat,
                    url('bg2.png') center right no-repeat;
      }
      .div2{
        float: left;
        background-color: green;
        border: 30px dotted red;
        margin-top: 20px;
        width: 800px;
        height: 500px;
        background: pink url('cherry.png') no-repeat center left/cover border-box padding-box;
        /*background-size:contain;*/
        /*background-origin: border-box;
        background-clip: content-box;*/
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div2"></div>
  </body>
</html>
